<template>
  <!-- 首页——素材模板 -->
  <div class="material">
    <div class="common">
      <div class="mater_top">
        <p>素材模板</p>
        <p>Material template</p>
      </div>
      <div v-if="sucai" class="mater_bottom">
        <div
          v-for="(item, index) in sucai"
          :key="index"
          class="download"
          @click="routerxq(item.id)"
          @mouseleave="changele"
          @mouseover="change(index)"
        >
          <p>
            <img :src="item.image" alt="著名美工师某某设计，海苦的声音" />
          </p>
          <p :class="{ addclass: index == num }" class="abc">
            {{ item.title }}
          </p>
          <p :class="{ addclass: index == num }" class="abc">点击下载</p>
        </div>
      </div>
      <div v-else class="noData">暂无数据</div>
      <button style="cursor:pointer;" @click="routers()">查看更多素材</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "material",
  components: {},
  props: {
    sucai: Array,
  },
  data() {
    return {
      down: [
        {
          image: require("../assets/index_metail1.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail2.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail3.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail4.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail5.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail6.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail7.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
        {
          image: require("../assets/index_metail8.png"),
          title: "著名美工师某某设计，海苦的声音",
        },
      ],
      num: null,
    };
  },
  methods: {
    routers() {
      this.$router.push("/Material");
    },
    routerxq(a) {
      this.$router.push({
        path: "/Sourexq",
        query: {
          id: a,
          name: 4,
        },
      });
    },
    change(index) {
      this.num = index;
    },
    changele() {
      this.num = null;
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.addclass {
  display: block !important;
}

.abc {
  display: none;
  transition: opacity 3s;
}
.material {
  width: 100%;
  background-color: #fff;
  margin: 20px auto;

  .common {
    width: 1170px;
    padding: 60px 15px 33px 15px;
    margin: 0 auto;
    background-color: #f7f8fa;

    .mater_top {
      width: 100%;
      text-align: center;

      :nth-child(1) {
        color: #333;
        font-size: 28px;
      }

      :nth-child(2) {
        color: #999;
        margin-top: 10px;
        font-size: 18px;
      }
    }

    .mater_bottom {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      // margin-top: 30px;
      .download {
        width: 266px;
        // width: 22.5%;
        position: relative;
        text-align: center;
        margin-top: 44px;
        border-radius: 5px;

        :nth-child(1) {
          width: 100%;

          img {
            display: block;
            width: 100%;
            // width: 266px;
            height: 330px;
            object-fit: cover;
          }
        }

        :nth-child(2) {
          width: 100%;
          background-color: rgba($color: #000000, $alpha: 0.3);
          color: #fff;
          font-size: 16px;
          line-height: 40px;
          border-radius: 0px 0px 5px 5px;
          position: absolute;
          bottom: 0;
        }

        :nth-child(3) {
          width: 79px;
          height: 34px;
          background: #dfd65e;
          border-radius: 16px;
          font-size: 14px;
          color: #ffffff;
          line-height: 34px;
          position: absolute;
          top: 21px;
          right: 6px;
          cursor: pointer;
        }
      }
      .download {
        transition: all 0.6s;
      }
      .download:hover {
        transition: all 0.6s;
        transform: scale(1.05);
      }
    }

    button {
      display: block;
      width: 214px;
      height: 58px;
      margin: 0 auto;
      font-size: 20px;
      color: #ffffff;
      line-height: 48px;
      background: #33cfff;
      border-radius: 29px;
      outline: none;
      border: none;
      margin-top: 43px;
      text-align: center;
    }
  }
}
</style>
